<template>
  <div class="myNews">
    <div class="myNews_title">
      <i class="icon iconfont icon-fanhui" @click="back"></i>
      <p>我的消息</p>
    </div>
    <div>
      <el-tabs v-model="activeName">
      <el-tab-pane label="评论" name="first">
        <div class="myNews_comment">
          <ul>
            <li>
                <div class="myNews_comment_list">
                    <div class="myNews_comment_list_info clearfix">
                      <img src="../../assets/images/mine_head.jpg" height="100" width="100" alt="">
                      <div class="myNews_comment_list_info_name">
                          <p>离散也</p>
                          <p>2-22 01:01</p>
                      </div>
                    </div>
                    <div class="myNews_comment_list_com">
                        <p>像他们致敬，</p>
                    </div>
                    <div class="myNews_comment_list_transmit clearfix">
                      <img src="../../assets/images/mine_head.jpg" height="150" width="150" alt="">
                        <div class="myNews_comment_list_transmit_info">
                          <p>卑微的我</p>
                          <p>#中国首艘货运飞船天舟一号发射成功</p>
                        </div>
                      
                    </div>
                </div>
            </li>
            <li>
                <div class="myNews_comment_list">
                    <div class="myNews_comment_list_info clearfix">
                      <img src="../../assets/images/mine_head.jpg" height="100" width="100" alt="">
                      <div class="myNews_comment_list_info_name">
                          <p>离散也</p>
                          <p>2-22 01:01</p>
                      </div>
                    </div>
                    <div class="myNews_comment_list_com">
                        <p>像他们致敬，</p>
                    </div>
                    <div class="myNews_comment_list_transmit clearfix">
                      <img src="../../assets/images/mine_head.jpg" height="150" width="150" alt="">
                        <div class="myNews_comment_list_transmit_info">
                          <p>卑微的我</p>
                          <p>#中国首艘货运飞船天舟一号发射成功</p>
                        </div>
                      
                    </div>
                </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="私信" name="second">
       <div class="myNews_privateLetter">
          <ul>
            <li class="clearfix"> 
              <div class="myNews_privateLetter_l">
                  <img src="../../assets/images/mine_head.jpg" height="70" width="70" alt="">
              </div>
               <div class="myNews_privateLetter_r">
                  <div class="clearfix">
                    <span>系统消息</span>
                    <small>3-24</small>
                  </div>
                  
                  <p>你充值的逗比已经到账</p>
              </div>
            </li>

            <li class="clearfix"> 
              <div class="myNews_privateLetter_l">
                  <img src="../../assets/images/mine_head.jpg" height="70" width="70" alt="">
              </div>
               <div class="myNews_privateLetter_r">
                  <div class="clearfix">
                    <span>系统消息</span>
                    <small>3-24</small>
                  </div>
                  
                  <p>你充值的逗比已经到账</p>
              </div>
            </li>
          </ul>
       </div>
      </el-tab-pane>
      <el-tab-pane label="通知" name="third">
        <div class="myNews_list">
          <ul>
            <li>
              <div class="clearfix">
                <span>系统消息</span>
                <small>3-24</small>
              </div>
              
              <p>你充值的逗比已经到账</p>
            </li>
            <li>
              <div class="clearfix">
                <span>系统消息</span>
                <small>3-24</small>
              </div>
              
              <p>你充值的逗比已经到账</p>
            </li>
            <li>
              <div class="clearfix">
                <span>系统消息</span>
                <small>3-24</small>
              </div>
              
              <p>你充值的逗比已经到账</p>
            </li>
          </ul>
      </div>
      </el-tab-pane>
    </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: 'mynews',
  data () {
    return {
      activeName: 'first'
    }
  },
  methods:{
            back(){
                this.$router.go(-1);
            }
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.myNews_title {
  height: 100/75rem;
  position: relative;
}
.myNews_title i {
  width: 40/75rem;
  height: 40/75rem;
  position: absolute;
  left: 15/75rem;
  top: 50%;
  margin-top: -15/75rem;
  font-size: 30/75rem;
}
.myNews_title p{
  text-align: center;
  font-size: 36/75rem;
  line-height: 100/75rem;
  font-weight: 700;
}

.myNews_list ul {
  font-size: 28/75rem;

}
.myNews_list ul span {
  float: left;

}
.myNews_list ul small {
  float: right;
   color: #ccc;
}
.myNews_list ul li {
  padding:20/75rem 15/75rem;
  border-bottom: 1px solid #ccc;
}
.myNews_list ul li p {
  line-height: 60/75rem;
  color: #ccc;
}
.myNews_privateLetter {
  font-size: 30/75rem
}
.myNews_privateLetter_l {
  float: left;
  // margin:15/75rem 20/75rem;
}
.myNews_privateLetter_l img {
  border-radius: 50%;
  margin-top: 10/75rem;
}
.myNews_privateLetter_r {
  float: left;
  margin-left: 30/75rem;
  width: 80%;
}
.myNews_privateLetter_r span {
  float: left;
}
.myNews_privateLetter_r small {
  float: right;
  color: #ccc;
}
.myNews_privateLetter_r p {
  line-height: 60/75rem;
  color: #ccc;
  font-size: 28/75rem;
}
.myNews_privateLetter ul li {
  padding:15/75rem; 
  border-bottom: 1px solid #ccc;
}

.myNews_comment_list_info {
  font-size: 30/75rem;
  margin:20/75rem;
  padding-top: 20/75rem;
  margin-top: 0;
}
.myNews_comment_list_info img {
  float: left;
  // margin-top: 20/75rem;
  border-radius: 50%;
}
.myNews_comment_list_info_name {
  float: left;
  margin-left: 20/75rem;
}
.myNews_comment_list_info_name p {
  line-height: 50/75rem;
}
.myNews_comment_list_com {
  font-size: 30/75rem;
  margin-left: 20/75rem;
}
.myNews_comment_list_transmit {
  background-color: #f0f0f0;
  margin:20/75rem;
}
.myNews_comment_list_transmit img {
  float: left;
}
.myNews_comment_list_transmit_info {
  
  // padding-top: 20/75rem;
  width:75%;
  float: right;
    font-size: 30/75rem;
}
.myNews_comment_list_transmit_info p {
  line-height: 60/75rem;
}
.myNews_comment_list_transmit_info p:first-child {
  font-size: 34/75rem;
}
.myNews_comment ul li {
  margin-bottom: 20/75rem;
  background-color: #fff;
}
.myNews_comment {
  background-color: #f1f1f1;
}
.myNews_comment_list {
  padding-bottom: 10/75rem;
}
</style>
